<template>
  <div id="Deltab">
    <!-- <h1>账单明细</h1> -->
    <el-row :gutter="0" id="bg">
      <el-col :span="3"
        ><div class="grid-content bg-purple bg">
          <img src="../assets/images/p1.jpg" alt="" id="myimg" /></div
      ></el-col>
      <el-col :span="3"
        ><div class="grid-content bg-purple bg">
          <h3 class="font1">
            {{ delData2.real_estate_name }}
          </h3>
        </div></el-col
      ><el-col :span="1"
        ><div class="grid-content bg-purple bg">
          <el-divider direction="vertical"></el-divider></div
      ></el-col>
      <el-col :span="5"
        ><div class="grid-content bg-purple bg">
          <p class="font">商品名称</p>
          <h5 class="font">
            <!-- {{ delData[0].goods_name }} -->
            {{ delData2.goods_name }}
          </h5>
        </div></el-col
      >

      <el-col :span="1"
        ><div class="grid-content bg-purple bg">
          <el-divider direction="vertical"></el-divider></div
      ></el-col>
      <el-col :span="5"
        ><div class="grid-content bg-purple bg">
          <p class="font">统计周期</p>
          <h5 class="font">
            <!-- <span>
              {{ delData[0].group_purchase_discount.activity_time_start }}</span
            > -->
            <span>2020-5-8</span>
            至
            <!-- <span>{{
              delData[0].group_purchase_discount.activity_time_end
            }}</span> -->
            <span>2020-11-07</span>
          </h5>
        </div></el-col
      >
      <el-col :span="1"
        ><div class="grid-content bg-purple bg">
          <el-divider direction="vertical"></el-divider></div
      ></el-col>
      <el-col :span="5"
        ><div class="grid-content bg-purple bg">
          <p class="font">销售总额</p>
          <h5 class="font">
            <span style="color: red"> {{ priceall }}</span
            >元
          </h5>
        </div></el-col
      >
    </el-row>
    <!-- 明细 -->
    <el-row>
      <el-col :span="24"
        ><div class="grid-content bg-purple-dark" id="minxi">
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="订单明细" name="first">
              <!-- 订单明细 -->
              <el-table :data="delData" style="width: 100%" align="center">
                <el-table-column
                  prop="orders_id"
                  label="订单号"
                  width="180"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="admin"
                  label="下单用户"
                  width="180"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="orders_no"
                  label="订单总额"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="orders_time"
                  label="下单时间"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="user.user_name"
                  label="买家"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="promo.promo_status"
                  label="优惠券状态"
                  align="center"
                >
                </el-table-column>
                <el-table-column prop="" label="操作" align="center">
                  <template scope="scope">
                    <el-button type="primary" @click="activeselect(scope.row)"
                      >查看</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <!-- 退款明细 -->
            <el-tab-pane label="退款明细" name="second">
              <el-table
                :data="refundfenyeData1"
                style="width: 100%"
                align="center"
              >
                <el-table-column
                  prop="orders_id"
                  label="订单号"
                  width="180"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="dispose_id"
                  label="退单号"
                  width="180"
                  align="center"
                >
                </el-table-column>
                <el-table-column prop="admin" label="申请用户" align="center">
                </el-table-column>

                <el-table-column
                  prop="user.user_name"
                  label="买家"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="refund.refund"
                  label="退款金额"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="refund.application_time"
                  label="退款时间"
                  align="center"
                >
                </el-table-column>
                <el-table-column prop="" label="操作" align="center">
                  <template scope="scope">
                    <el-button type="primary" @click="selectrefund(scope.row)"
                      >查看</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination
                background
                layout="prev, pager, next"
                :total="delData1.length"
                :current-page="nowpage1"
                :page-size="10"
                @current-change="changePage"
              >
              </el-pagination>
            </el-tab-pane>
          </el-tabs></div
      ></el-col>
    </el-row>
  </div>
</template>

<script>
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
export default {
  name: "Deltab",
  props: ["delData", "delData1", "delData2", "nowpage1", "refundfenyeData1"],
  data() {
    return {
      priceall: 0,
      activeName: "first",
    };
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    /* 退款 */
    selectrefund(row) {
      // console.log(row);
      this.$emit("selectref", row);
    },
    /* 订单 */
    activeselect(row) {
      // console.log(row);
      this.$emit("selectact", row);
    },
    /* 分页 */
    changePage(val) {
      this.$emit("chengerefunfenye", val);
    },
  },
  created() {
    this.priceall = 158723.0;
    //   this.delData[0].orders_total - this.delData[0].refund.refund;
    // console.log(this.delData1);
  },
};
</script>

<style >
.bg {
  min-height: 150px;
  max-height: 300px;
  background: #63b7af;
  text-align: center;
  display: table;
}
#bg {
  background: #63b7af;
}
.font1 {
  display: table-cell;
  vertical-align: middle;
}
.font {
  margin-top: 30px;
}
#minxi {
  border-radius: 4px;
  min-height: 150px;
  margin-top: 10px;
  background: #ffffff;
}
#myimg {
  width: 100px;
  height: 100px;
  border-radius: 50px;
  margin: 25px 0 0 25px;
}
.el-divider--vertical {
  height: 100px;
  float: left;
  margin-top: 25px;
}
</style>